import Vue from 'vue'
import Vuex from 'vuex'
import { loginApi } from '@/api'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: '',
    refresh_token: ''
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    // 【本地存储包括面试题】 localStorage sessionStorage Cookie indexBD
    // 他们的共同点都是用来在浏览器中存储数据 存到硬盘vuex存到内存
    // 他们都只能存放字符串 如果想要存放对象 通过JSON。stringify进行转换
    // localStorage.setItem('token', JSON.stringift({ a: 1 }))
    // sessionStorage 临时会话存储 如果当前页面关闭存储清空 如果同一个网站开了多个标签页可以跨标签页面访问 5M
    // Cookie 浏览器存储的一种 cookie大小之后4k左右 （不同浏览器cookie的大小也不同）
    // cookie会随着请求一起发送到后端里面通常存放用户信息、用户配置、用户token
    setRefreshToken (state, refresh_token) {
      state.refresh_token = refresh_token
      localStorage.setItem('refresh_token', refresh_token)
    }
  },

  // 为什么使用vuex实现登陆功能
  // 正常的企业开发场景会将登陆获取用户信息等功能放在vuex的actions中进行调用
  // tokeng多处多次使用是一个公共的状态中e×更适合公共状态管理
  // 由于vuex不能实现刷新保存所以还需要将token数据存放在本地一份(1 ocalSorage,cookie

  // vuex实现登陆并保存token的步明
  // 1、在vuex中的state里定义变量
  // 2.在nutations中定义修改state数据的方法
  // 3.需要在vuex中引入接口（登陆接口）
  // 4.在act1ons中实现接口的调用同时调用vue义中的mutat1os中的方法实现将
  // 接回的返回值存放在vuex的state中
  // 5.在需要调用登陆接回的文件中通过mapActions或者this.$store,dispatch("asyncLoginAction','传入的接回所需参数')
  actions: {
    async asyncLoginAction (store, val) {
      try {
        const res = await loginApi(val)
        const { token, refresh_token } = res.data.data
        store.commit('setToken', token)
        store.commit('setRefreshToken', refresh_token)
        return Promise.resolve(res) // 成功返回的Promise对象
      } catch (err) {
        return Promise.reject(err) // 返回失败的Promise对象
      }
    }
  },
  modules: {
  }
})
